<template>
  <view class="member">
    <view class="vip">
      <image :src="imgSrc" class="vip-img" />
      <view class="vip-content">
        <view class="top">
          <view class="top-img">
            <view>
              <image :src="avatarUrl" class="avatar-img" />
            </view>
          </view>
          <view class="top-info">
            <view class="name">{{userName}} </view>
            <view class="text">{{$t('member.dangQianHyzh')}}：{{ vipCount }} {{$t('index.zhang')}} </view>
          </view>
          <view class="more" @click="toAllMember">{{$t('index.chakanQb')}}></view>
        </view>
      </view>
    </view>
    <view class="swiper-wrap">
      <view class="white-bg">
        <image :src="whiteBgUrl" class="white-img" />
      </view>
      <view class="swiper-content">
        <view class="vip-title">
          <view>
            <image :src="vipTitleIcon" class="vip-icon" />
          </view>
          <view class="text">{{$t('member.kaiTongHuiY')}}</view>
          <view>
            <image :src="vipTitleIcon" class="vip-icon" />
          </view>
        </view>
        <swiper class="swiper swiper-img" :duration="300" @change=" (e) => {vipSwiperCount = e.detail.current}" :nextMargin="nextMarginSet(vipSwiperCount)" :previous-margin="previousMarginSet(vipSwiperCount)">
          <swiper-item v-for="item in vipList" :key="item.id" class="swiper-item-wrap">
            <view class="swiper-item" :style="{ 'background-image': 'url('+item.url+')' }">
              <view class="item-top">{{ item.name }}</view>
              <view class="item-middle">￥{{ item.priceStr }}</view>
              <view class="item-bottom">{{$t('member.youXiaoQ')}}:{{ item.validityPeriod }}天</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="content-wrap">
      <view class="agreement">
        <view class="agreement-radio">
          <u-radio-group v-model="isAgree">
            <u-radio shape="circle" name="1" activeColor="#75CECC" />
          </u-radio-group>
        </view>
        <view>{{$t('member.yueDuTy')}}<text>《{{$t('member.huiYuanXy')}}》</text><text>《{{$t('member.quanYiGz')}}》</text></view>
      </view>
      <view class="price-button" @click="openPopup">{{$t('member.liJiGm')}}</view>
      <view class="vip-title">
        <view>
          <image :src="vipTitleIcon" class="vip-icon" />
        </view>
        <view class="text">{{typeText}}{{$t('member.zhuanShuQy')}}</view>
        <view>
          <image :src="vipTitleIcon" class="vip-icon" />
        </view>
      </view>

      <view class="bottom-list-item">
        <view class="item-img">
          <image :src="vip1Icon" class="bottom-icon" />
        </view>
        <view class="item-text">
          <view class="h-title">{{$t('member.zaiXianSp')}}</view>
          <view class="sub-title">{{$t('member.wenZhenFw')}}</view>
        </view>
      </view>

      <view class="bottom-list-item">
        <view class="item-img">
          <image :src="vip2Icon" class="bottom-icon" />
        </view>
        <view class="item-text">
          <view class="h-title">{{$t('member.jianKangCpFw')}}{{textCount}}{{$t('member.zheYouH')}}</view>
          <view class="sub-title">{{$t('member.appNei')}}，{{$t('member.jianKangCpFw')}}{{textCount}}{{$t('member.zheYouH')}}</view>
        </view>
      </view>

      <view class="bottom-list-item">
        <view class="item-img">
          <image :src="vip3Icon" class="bottom-icon" />
        </view>
        <view class="item-text">
          <view class="h-title">{{$t('member.yaoPinKdDj')}}</view>
          <view class="sub-title">{{$t('member.zuBuCm')}}</view>
        </view>
      </view>
    </view>
    <tabBar />

    <u-popup :show="showPopup" closeable @close="showPopup=false">
      <view class="swiper-content popup-swiper">
        <view class="vip-title">
          <view>
            <image :src="vipTitleIcon" class="vip-icon" />
          </view>
          <view class="text">{{$t('member.kaiTongHuiY')}}</view>
          <view>
            <image :src="vipTitleIcon" class="vip-icon" />
          </view>
        </view>
        <swiper class="swiper swiper-img" :duration="300" @change="popupSwiperChange" :nextMargin="nextMarginSet(swiperCurrent)" :previous-margin="previousMarginSet(swiperCurrent)">
          <swiper-item v-for="item in vipList" :key="item.id">
            <view class="swiper-item" :style="{ 'background-image': 'url('+item.url+')' }">
              <view class="item-top">{{ item.name }}</view>
              <view class="item-middle">￥{{ item.priceStr }}</view>
              <view class="item-bottom">{{$t('member.youXiaoQ')}}:{{ item.validityPeriod }}天</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="choice-num">
        <view>{{$t('member.xuanZeSl')}}</view>
        <view><u-number-box v-model="popupCount" @change="countChange" button-size="24" disabledInput /></view>
      </view>
      <view class="price-button" @click="sureBuy" v-if="vipList[swiperCurrent]">￥{{(vipList[swiperCurrent].priceStr * popupCount|| 0).toFixed(2)}}{{$t('member.liJiGm')}}</view>
    </u-popup>
  </view>
</template>

<script>
import tabBar from "../../components/tabBar.vue";
export default {
  components: {
    tabBar,
  },
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  watch: {
    vipSwiperCount(val) {
      if (val === 0) {
        this.textCount = 8;
        this.typeText = this.$t("member.baiYin");
      } else if (val === 1) {
        this.textCount = 7;
        this.typeText = this.$t("member.huangJin");
      } else if (val === 2) {
        this.textCount = 6;
        this.typeText = this.$t("member.zuanShi");
      }
    },
  },
  data() {
    return {
      avatarUrl: "",
      imgSrc: "",
      userName: "",
      whiteBgUrl: "",
      isAgree: "1",
      vipList: [],
      vipCount: 0,
      totalCount: 0,
      showPopup: false,
      popupCount: 1,
      vipSwiperCount: 0,
      swiperCurrent: 0,
      textCount: 8,
      typeText: this.$t("member.baiYin"),
      vipTitleIcon: "",
      vip1Icon: "",
      vip2Icon: "",
      vip3Icon: "",
    };
  },
  onLoad() {
    this.imgSrc = this.imgPath + "/images/member_vip.png";
    this.vipTitleIcon = this.imgPath + "/images/icon/member_vip_title.png";
    this.whiteBgUrl = this.imgPath + "/images/member_white_bg.png";
    this.vip1Icon = this.imgPath + "/images/icon/memer_vip1.png";
    this.vip2Icon = this.imgPath + "/images/icon/memer_vip2.png";
    this.vip3Icon = this.imgPath + "/images/icon/memer_vip3.png";
    this.getVipList();
  },
  onShow() {
    this.getUserInfo();
    uni.setNavigationBarTitle({
      title: this.$t("page.huiYuanGm"),
    });
  },
  methods: {
    nextMarginSet(count) {
      if (count === 2) {
        return 0;
      } else {
        return 20;
      }
    },
    previousMarginSet(count) {
      if (count === 2) {
        return 20;
      } else {
        return 0;
      }
    },
    async getUserInfo() {
      const res = await this.$api.vipUserCardInfo({});
      if (res.code === 0) {
        this.userName = res.data.userName;
        this.avatarUrl =
          res.data.avatarUrl || this.imgPath + "/images/icon/avatar.png";
        this.vipCount = res.data.count;
      }
    },
    async getVipList() {
      const params = {
        pageNum: 1,
        pageSize: 50,
      };
      const res = await this.$api.vipcardList(params);
      if (res.code === 0) {
        this.vipList = res.data.list;
        this.totalCount = res.data.totalCount;
      } else {
        this.vipList = [];
        this.totalCount = 0;
      }
    },
    toAllMember() {
      uni.navigateTo({ url: "/pages/all_member/all_member" });
    },
    openPopup() {
      this.showPopup = true;
    },
    countChange(e) {
      this.popupCount = e.value;
    },
    popupSwiperChange(e) {
      this.swiperCurrent = e.detail.current;
    },
    async sureBuy() {
      const params = {
        cardId: this.vipList[this.swiperCurrent].id,
        count: this.popupCount,
      };
      const res = await this.$api.vipGenerateOrder(params);
      if (res.code === 0) {
        // const payRes = await this.$api.viptempPay({ orderNumber: res.data });
        const payRes = await this.$api.prePay({ orderNumber: res.data });
        if (payRes.code === 0) {
          const that = this;
          const data = JSON.parse(payRes.data.pay_info);
          uni.requestPayment({
            timeStamp: data.timeStamp, // 时间戳
            nonceStr: data.nonceStr, //随机字符串
            // package: payRes.data.prepay_id, //接口返回的prepay_id
            package: data.package,
            signType: data.signType, //签名算法，需要与后台下单时一致
            paySign: data.paySign,
            success: function (resSuccess) {
              if (resSuccess.errMsg == "requestPayment:ok") {
                uni.$u.toast(that.$t("member.gouMaiCg"));
                that.getUserInfo();
                that.showPopup = false;
              }
            },
            fail: function (err) {
              console.log(err);
              if (err.errMsg == "requestPayment:fail cancel") {
                uni.$u.toast(that.$t("pay.zhiFuQx"));
              } else {
                uni.$u.toast(err.errMsg);
              }
            },
          });
        }
      } else {
        uni.$u.toast(res.msg);
      }
    },
  },
};
</script>

<style lans="scss">
page {
  background-color: #eed39e;
}
</style>
<style lang="scss" scoped>
/deep/.u-number-box__minus {
  background-color: transparent !important;
  border: 1px solid #f7bf55;
  border-radius: 12px 12px !important;
  width: 24px !important;
  height: 24px !important;
}
/deep/ .u-number-box__plus {
  background-color: transparent !important;
  border: 1px solid #f7bf55;
  border-radius: 12px 12px !important;
  width: 24px !important;
  height: 24px !important;
}
/deep/ .u-number-box__input {
  background-color: transparent !important;
}
.swiper-content {
  height: 225px;
  width: calc(100% - 20px);
  position: absolute;
  left: 10px;
  top: 35px;
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;

  .swiper-img {
    height: 180px;
  }
  .swiper-item-wrap:last-child {
    // margin-left: 2%;
  }
  .swiper-item-popup {
    width: 90% !important;
    margin-left: 5%;
  }

  .swiper-item {
    width: 100%;
    height: 170px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .item-top {
      color: #fff;
      padding: 30px 0 0 30px;
    }
    .item-middle {
      color: #fff;
      height: 50px;
      font-size: 24px;
      padding: 20px 0 0 30px;
    }
    .item-bottom {
      color: #fff;
      text-align: right;
      padding-right: 30px;
    }
  }
}
.price-button {
  height: 45px;
  width: 70%;
  background: linear-gradient(180deg, #0b0b0b 0%, #5c5c5c 100%);
  border-radius: 25px;
  margin: 20px auto 0;
  text-align: center;
  color: #fff;
  line-height: 45px;
  margin-bottom: 30px;
}

.member {
  overflow: hidden;
  width: 100%;
  .vip {
    width: 100%;
    height: 130px;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    .vip-img {
      width: calc(100% - 30px);
      height: 130px;
      position: absolute;
      left: 15px;
      top: 0;
      z-index: 0;
    }
    .vip-content {
      height: 80px;
      width: calc(100% - 60px);
      overflow: hidden;
      position: absolute;
      left: 30px;
      top: 0;
      z-index: 1;
      .top {
        height: 90px;
        overflow: hidden;
        display: flex;
        align-items: center;
        .top-img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          overflow: hidden;
          .avatar-img {
            width: 48px;
            height: 48px;
            border-radius: 50% 50%;
          }
        }
        .top-info {
          flex: 1;
        }
        .name {
          padding-left: 10px;
          font-size: 14px;
          margin-top: 5px;
          color: #fff;
        }
        .text {
          color: #fff;
          font-size: 14px;
          margin-left: 10px;
          margin-top: 5px;
        }
        .more {
          font-size: 14px;
          color: #fff;
        }
      }
    }
  }
  .vip-title {
    height: 60px;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    .vip-icon {
      width: 26px;
      height: 16px;
    }
    .text {
      padding: 0 15px;
      font-size: 18px;
      color: #333;
    }
  }
  .swiper-wrap {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: relative;
    top: -50px;
    .white-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      overflow: hidden;
      height: 280px;
      z-index: 0;
      .white-img {
        height: 280px;
        width: 100%;
      }
    }
  }
  .content-wrap {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    margin-top: -60px;
    padding-bottom: 60px;
  }
  .agreement {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: center;
    text {
      color: #e8ac3a;
    }
  }
  .bottom-list-item {
    height: 85px;
    width: calc(100% - 40px);
    overflow: hidden;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    background-color: #f1daae;
    border-radius: 8px;
    .item-img {
      padding-left: 30px;
    }
    .item-text {
      padding-left: 15px;
      flex: 1;
      .h-title {
        color: #8a602f;
        font-weight: bold;
      }
      .sub-title {
        color: #a87945;
        font-size: 14px;
      }
    }
    .bottom-icon {
      width: 40px;
      height: 42px;
    }
  }
}
.popup-swiper {
  position: static;
  padding-bottom: 10px;
  margin: 40px auto 0;
}
.choice-num {
  height: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20px;
  padding: 0 20px;
  border: 1px solid #333;
  border-radius: 8px;
}
</style>
